<template>
  <div class="aboutbox">
    <el-scrollbar>
      <div class="scrollbar-flex-content">
        <div v-for="item in 5" :key="item" class="scrollbar-demo-item">
          <div class="imgbox">
            <img src="@/assets/aut.jpg" style="width: 100%;">
          </div>
          <div class="nameofaut">
            任思军
          </div>
        </div>
      </div>
    </el-scrollbar>
  </div>
</template>

<script setup lang='js'>
</script>

<style  scoped>
.aboutbox {
  width: 100vw;
  height: 30vh;
}
.scrollbar-flex-content {
  display: flex;
}
.scrollbar-demo-item {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 150px;
  height: 150px;
  margin: 10px;
  text-align: center;
  border-radius: 50%;
  position: relative;
}
.scrollbar-demo-item  .imgbox{
  width: 150px;
  height: 150px;
  border-radius: 50%;
  overflow: hidden;
}
.nameofaut{
  position: absolute;
  bottom: -40px;
  color: black;
}
</style>
